<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %} base {% endblock %}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .sidebar-transition {
            transition: transform 0.3s ease-in-out;
        }
        .sidebar-overlay {
            transition: opacity 0.3s ease-in-out;
        }
        {% block extra_css %}{% endblock %}
    </style>
    {% block extra_head %}{% endblock %}
</head>

<body class="bg-gray-50">
    <!-- 顶部导航栏 -->
    <nav class="bg-white shadow-sm border-b border-gray-200 fixed top-0 left-0 right-0 z-40">
        <div class="px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    {% if show_sidebar|default(True) %}
                    <button id="sidebarToggle" class="lg:hidden p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <i class="fas fa-bars"></i>
                    </button>
                    <div class="flex-shrink-0 flex items-center ml-4 lg:ml-0">
                        <i class="fas fa-code text-blue-600 text-xl mr-3"></i>
                        <h1 class="text-xl font-bold text-gray-900">{% block page_title %}首页{% endblock %}</h1>
                    </div>
                    {% else %}
                    <div class="flex-shrink-0 flex items-center">
                        <i class="fas fa-code text-blue-600 text-xl mr-3"></i>
                        <h1 class="text-xl font-bold text-gray-900">AIPower</h1>
                    </div>
                    {% endif %}
                </div>
                
                <div class="flex items-center space-x-4">
                    {% block top_nav_extra %}{% endblock %}
                    
                    {% if show_user_controls|default(True) %}
                    <div id="userControls" class="flex items-center space-x-4">
                        <!-- 用户控件将通过 JavaScript 动态加载 -->
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </nav>

    {% if show_sidebar|default(True) %}
    <!-- 侧边栏 -->
    <aside id="sidebar" class="fixed inset-y-0 left-0 z-30 w-64 bg-white shadow-lg transform -translate-x-full lg:translate-x-0 sidebar-transition">
        <div class="flex items-center justify-center h-16 px-4 bg-blue-600">
            <i class="fas fa-cogs text-white text-2xl"></i>
            <span class="ml-3 text-white font-semibold text-lg">管理后台</span>
        </div>
        
        <nav class="mt-8 px-4">
            <ul class="space-y-2">
                <li>
                    <a href="/" class="flex items-center px-4 py-3 text-gray-700 {% if request.endpoint == 'index' %}bg-blue-50{% endif %} rounded-lg hover:bg-gray-100 transition-colors">
                        <i class="fas fa-home w-5 h-5 mr-3"></i>
                        <span>首页</span>
                    </a>
                </li>
                <li>
                    <a href="/files" class="flex items-center px-4 py-3 text-gray-700 {% if request.endpoint == 'files' %}bg-blue-50{% endif %} rounded-lg hover:bg-gray-100 transition-colors">
                        <i class="fas fa-folder w-5 h-5 mr-3"></i>
                        <span>文件管理</span>
                    </a>
                </li>
                <li>
                    <a href="/profile" class="flex items-center px-4 py-3 text-gray-700 {% if request.endpoint == 'profile' %}bg-blue-50{% endif %} rounded-lg hover:bg-gray-100 transition-colors">
                        <i class="fas fa-user w-5 h-5 mr-3"></i>
                        <span>个人信息</span>
                    </a>
                </li>
                <li class="pt-4 mt-4 border-t border-gray-200">
                    <a href="https://gitee.com/lineuman/lcs_flask_claude" target="_blank" class="flex items-center px-4 py-3 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors">
                        <i class="fab fa-git w-5 h-5 mr-3"></i>
                        <span>源码</span>
                    </a>
                </li>
            </ul>
        </nav>
    </aside>

    <!-- 侧边栏遮罩 -->
    <div id="sidebarOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-20 lg:hidden sidebar-overlay opacity-0 pointer-events-none"></div>
    {% endif %}

    <!-- 主内容区域 -->
    <div class="{% if show_sidebar|default(True) %}lg:ml-64{% endif %} pt-16">
        <div class="p-4 sm:p-6 lg:p-8">
            <!-- 警告消息 -->
            <div id="alert" class="hidden mb-4 p-4 rounded-md"></div>
            
            <!-- 页面主内容 -->
            {% block content %}{% endblock %}
        </div>
    </div>

    <script>
        // 侧边栏切换功能
        {% if show_sidebar|default(True) %}
        const sidebarToggle = document.getElementById('sidebarToggle');
        const sidebar = document.getElementById('sidebar');
        const sidebarOverlay = document.getElementById('sidebarOverlay');

        function toggleSidebar() {
            sidebar.classList.toggle('-translate-x-full');
            sidebarOverlay.classList.toggle('opacity-0');
            sidebarOverlay.classList.toggle('pointer-events-none');
        }

        function closeSidebar() {
            sidebar.classList.add('-translate-x-full');
            sidebarOverlay.classList.add('opacity-0');
            sidebarOverlay.classList.add('pointer-events-none');
        }

        if (sidebarToggle) {
            sidebarToggle.addEventListener('click', toggleSidebar);
        }
        if (sidebarOverlay) {
            sidebarOverlay.addEventListener('click', closeSidebar);
        }
        {% endif %}

        // 检查用户登录状态
        function checkAuthStatus() {
            const token = localStorage.getItem('access_token');
            const user = JSON.parse(localStorage.getItem('user') || '{}');
            const userControls = document.getElementById('userControls');
            
            if (token && userControls) {
                // 用户已登录
                userControls.innerHTML = `
                    <a href="/profile" class="text-blue-500 hover:text-blue-700">
                        <i class="fas fa-user mr-1"></i>个人信息
                    </a>
                    <span class="text-gray-700">欢迎, ${user.username}</span>
                    <button onclick="logout()" class="text-red-500 hover:text-red-700">
                        <i class="fas fa-sign-out-alt mr-1"></i>退出
                    </button>
                `;
            } else if (userControls) {
                // 用户未登录
                userControls.innerHTML = `
                    <a href="/login" class="text-blue-500 hover:text-blue-700">
                        <i class="fas fa-sign-in-alt mr-1"></i>登录
                    </a>
                    <a href="/register" class="text-green-500 hover:text-green-700">
                        <i class="fas fa-user-plus mr-1"></i>注册
                    </a>
                `;
            }
        }
        
        // 退出登录
        function logout() {
            localStorage.removeItem('access_token');
            localStorage.removeItem('user');
            {% if show_sidebar|default(True) %}
            showAlert('已成功退出登录', 'success');
            checkAuthStatus();
            {% else %}
            window.location.href = '/login';
            {% endif %}
        }
        
        // 显示警告消息
        function showAlert(message, type) {
            const alertDiv = document.getElementById('alert');
            if (alertDiv) {
                alertDiv.className = `mb-4 p-4 rounded-md ${type === 'success' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`;
                alertDiv.textContent = message;
                alertDiv.classList.remove('hidden');
                
                setTimeout(() => {
                    alertDiv.classList.add('hidden');
                }, 3000);
            }
        }
        
        // 页面加载时检查认证状态
        document.addEventListener('DOMContentLoaded', function() {
            {% if show_user_controls|default(True) %}
            checkAuthStatus();
            {% endif %}
            
            {% block extra_js %}{% endblock %}
        });
    </script>
</body>
</html>